<template>
  <view class="chat-group">
    <view class="tab-view">
      <view class="tab-item" :class="{ 'active-tab': index == TabCur }" v-for="(item, index) in tabList" :key="index"
        @tap="tabSelect" :data-id="index">{{ item.label }}</view>
    </view>
    <view class="group-list" v-if="TabCur === 0">
      <view class="group-item" v-for="item in groupList" :key="item.gc_no" @click="toChat(item)">
        <view class="icon" @click.stop="toChat(item)">
          <image :src="item.icon ? getImagePath(item.icon) : '../static/chat-active.png'" mode="aspectFit"
            class="image"></image>
        </view>
        <view class="content">
          <view class="top">
            <view class="name">{{ item.name }}</view>
            <view class="time">{{ formateTime(item.lastChatTime, true) }}</view>
          </view>
          <view class="bottom">
            <text class="message">{{ item.lastChatText || '' }}</text>
            <text class="unread">
              <text class="text" v-if="item.unreadAmount">{{ item.unreadAmount || '' }}</text>
            </text>
          </view>
        </view>
      </view>
    </view>
    <view class="cu-bar search bg-white" v-if="TabCur === 1">
      <view class="search-form round">
        <text class="cuIcon-search"></text>
        <input :adjust-position="false" type="text" placeholder="搜索圈子" confirm-type="search" v-model="keywords"
          @blur="InputBlur" />
      </view>
      <view class="action"><button class="cu-btn bg-green shadow-blur round">搜索</button></view>
    </view>
    <view class="group-list grid" v-if="TabCur === 1">
      <view class="group-item" v-for="item in otherGroup" :key="item.gc_no" @click="toPages('group-info', item)">
        <view class="icon">
          <image :src="item.icon ? getImagePath(item.icon) : '../static/chat-active.png'" mode="aspectFit"
            class="image"></image>
        </view>
        <view class="content">
          <view class="top">
            <view class="name">{{ item.name }}</view>
          </view>
        </view>
      </view>
      <!-- 		<view class="group-item" @click="toPages('create-group')">
				<view class="icon cuIcon-add"></view>
				<view class="content">
					<view class="top">
						<view class="name">创建圈子</view>
					</view>
				</view>
			</view> -->
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  export default {
    data() {
      return {
        groupList: [],
        otherGroup: [],
        TabCur: 0,
        keywords: '',
        tabList: [{
            label: '我的'
          },
          {
            label: '发现'
          }
        ]
      };
    },
    computed: {
      ...mapState({
        vuex_userInfo: state => state.user.userInfo
      })
    },
    methods: {
      async selectUnreadAmount(list) {
        let url = this.getServiceUrl('health', 'srvhealth_consultation_chat_record_select', 'select');
        let req = {
          serviceName: 'srvhealth_consultation_chat_record_select',
          colNames: ['*'],
          group: [{
              colName: 'rcv_group_no',
              type: 'by'
            },
            {
              colName: 'create_time',
              type: 'count'
            }
          ]
        };
        if (Array.isArray(list)) {
          let relationCondition = {
            relation: 'OR',
            data: [{
              relation: 'AND',
              data: []
            }]
          };
          relationCondition.data = list.map(item => {
            let obj = {
              relation: 'AND',
              data: [{
                colName: 'rcv_group_no',
                ruleType: 'eq',
                value: item.gc_no
              }, {
                colName: 'create_time',
                ruleType: 'gt',
                value: item.latest_sign_in_time
              }]
            };
            return obj;
          });
          req.relation_condition = relationCondition;
        }
        let res = await this.$http.post(url, req);
        if (res.data.state === 'SUCCESS' && Array.isArray(res.data.data) && res.data.data.length > 0) {
          this.groupList = this.groupList.map(item => {
            res.data.data.forEach(count => {
              if (count.rcv_group_no === item.gc_no) {
                item.unreadAmount = count.create_time;
              }
            });
            return item;
          });
        }
      },
      InputBlur(e) {
        if (e.detail) {
          let condition = [{
            colName: 'name',
            ruleType: 'like',
            value: e.detail.value
          }];
          this.selectOtherGroup(condition);
        }
      },
      tabSelect(e) {
        this.TabCur = Number(e.currentTarget.dataset.id);
        if (this.TabCur === 1) {
          this.selectOtherGroup();
        } else {
          this.selectMyGroup();
        }
      },
      toPages(type, info) {
        let self = this;
        if (type === 'group-info') {
          uni.showModal({
            title: '提示',
            content: `是否加入${info.name}圈子?`,
            confirmText: '加入',
            confirmColor: '#007AFF',
            success(res) {
              if (res.confirm) {
                self.joinGroup(info);
              }
            }
          });
        } else if (type === 'create-group') {
          let fieldsCond = [{
            column: 'circle_visible',
            value: '不开放'
          }]
          let url =
            `/publicPages/formPage/formPage?serviceName=srvhealth_group_circle_select&type=add&fieldsCond=${JSON.stringify(fieldsCond)}`;
          uni.navigateTo({
            url: url
          });
        }
      },
      toChat(item) {
        //跳转到群组聊天页面
        uni.navigateTo({
          url: `/publicPages/chat/chat?type=群组圈子&attend_approve=${item.attend_approve}&groupNo=${item.gc_no}&pg_no=${item.pg_no}&circle_visible=${item.circle_visible}&group_role=${item.group_role}`
        });
      },
      joinGroup(e) {
        let url = this.getServiceUrl('health', 'srvhealth_person_group_circle_add', 'operate');
        let req = [{
          serviceName: 'srvhealth_person_group_circle_add',
          condition: [],
          data: [{
            person_no: this.vuex_userInfo.no,
            user_no: this.vuex_userInfo.userno,
            gc_no: e.gc_no,
            group_role: '用户',
            latest_sign_in_time: this.formateDate('', 'DateTime')
          }]
        }];
        this.$http.post(url, req).then(res => {
          if (res.data.state === 'SUCCESS') {
            uni.showToast({
              title: '操作成功'
            });
            uni.startPullDownRefresh();
            this.selectMyGroup();
          }
        });
      },
      async selectGroup(cond, page) {
        // 查找圈子
        let url = this.getServiceUrl('health', 'srvhealth_person_group_circle_select', 'select');
        let req = {
          serviceName: 'srvhealth_person_group_circle_select',
          colNames: ['*'],
          page: {
            pageNo: 1,
            rownumber: 10
          }
        };
        if (Array.isArray(cond)) {
          req.condition = cond;
        }
        if (page) {
          req.page = page;
        }
        let res = await this.$http.post(url, req);
        if (Array.isArray(res.data.data)) {
          return res.data.data;
        }
      },
      async selectOtherGroup(condition) {
        // 查找当前登录用户未加入的圈子
        let cond = [{
          colName: 'gc_no',
          ruleType: 'notin',
          value: this.groupList.map(item => item.gc_no).toString()
        }, {
          "colName": "circle_visible",
          "ruleType": "ne",
          "value": '不开放',
        }];
        if (condition) {
          cond = [...cond, ...condition];
        }
        let res = await this.selectGroupInfo('', '', cond);
        if (Array.isArray(res)) {
          this.otherGroup = res;
        }
      },
      async selectMyGroup() {
        // 查找当前登录用户已加入的圈子
        if (this.vuex_userInfo && this.vuex_userInfo.no) {
          let res = await this.selectGroup([{
            colName: 'person_no',
            ruleType: 'eq',
            value: this.vuex_userInfo.no
          }]);
          if (Array.isArray(res) && res.length > 0) {
            let no = res.map(item => item.gc_no);
            this.groupList = await this.selectGroupInfo(no.toString(), res);
            let lastTimeArr = res.map(item => {
              return {
                gc_no: item.gc_no,
                latest_sign_in_time: item.latest_sign_in_time
              };
            });
            this.selectUnreadAmount(this.groupList);
            this.selectLastChatText(no.toString());
          }
        }
      },
      async selectGroupInfo(no, data, cond) {
        if (no || cond) {
          let url = this.getServiceUrl('health', 'srvhealth_group_circle_select', 'select');
          let req = {
            serviceName: 'srvhealth_group_circle_select',
            colNames: ['*'],
            condition: [{
              colName: 'gc_no',
              ruleType: 'in',
              value: no
            }, {
              "colName": "circle_visible",
              "ruleType": "ne",
              "value": '不开放',
            }]
          };
          if (cond) {
            req.condition = cond;
          }
          let res = await this.$http.post(url, req);
          if (Array.isArray(res.data.data) && Array.isArray(data)) {
            res.data.data = res.data.data.map(item => {
              data.map(info => {
                if (info.gc_no === item.gc_no) {
                  item.group_role = info.group_role;
                  item.latest_sign_in_time = info.latest_sign_in_time;
                  item.pg_no = info.pg_no;
                }
              });
              return item;
            });
            return res.data.data;
          } else if (Array.isArray(res.data.data)) {
            return res.data.data;
          }
        }
      },
      selectLastChatText(no) {
        let url = this.getServiceUrl('health', 'srvhealth_consultation_chat_record_select', 'select');
        let req = {
          serviceName: 'srvhealth_consultation_chat_record_select',
          colNames: ['*'],
          page: {
            rownumber: 20
          },
          condition: [{
            colName: 'rcv_group_no',
            ruleType: 'in',
            value: no
          }]
        };
        this.$http.post(url, req).then(res => {
          if (Array.isArray(res.data.data)) {
            this.groupList = this.groupList.map(item => {
              res.data.data.map(info => {
                if (info.rcv_group_no === item.gc_no) {
                  if (!item.lastChatTime || item.lastChatTime < info
                    .create_time) {
                    // 最新一条消息
                    item.lastChatState = info.msg_state;
                    item.lastChatTime = info.create_time;
                    switch (info.msg_content_type) {
                      case '文本':
                        item.lastChatText = info.msg_content;
                        break;
                      case '链接':
                        item.lastChatText = '[链接]';
                        break;
                      case '图片':
                        item.lastChatText = '[图片]';
                        break;
                      case '语音':
                        item.lastChatText = '[语音]';
                        break;
                      case '视频':
                        item.lastChatText = '[视频]';
                        break;
                      case '文件':
                        item.lastChatText = '[文件]';
                        break;
                    }
                  }
                }
              });
              return item;
            });
          }
        });
      }
    },
    onPullDownRefresh() {
      if (this.TabCur === 1) {
        this.selectOtherGroup();
      } else if (this.TabCur === 0) {
        this.selectMyGroup();
      }
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    onShow() {
      this.$nextTick(function() {
        if (this.TabCur === 1) {
          this.selectOtherGroup();
        } else if (this.TabCur === 0) {
          this.selectMyGroup();
        }
      });
    }
  };
</script>

<style lang="scss" scoped>
  .chat-group {
    min-height: calc(100vh - var(--window-top) - var(--window-bottom));
    background-color: #fff;
  }

  .tab-view {
    display: flex;

    .tab-item {
      padding: 30rpx;
      font-size: 36rpx;

      &.active-tab {
        font-weight: bold;
        position: relative;

        &::after {
          content: '';
          height: 5rpx;
          width: 40rpx;
          bottom: 20rpx;
          left: calc(50% - 20rpx);
          background-color: #000000;
          position: absolute;
        }
      }
    }
  }

  .group-list {
    display: flex;
    flex-direction: column;

    .group-item {
      display: flex;
      padding: 20rpx;
      transition: all 0.5s ease-out;
      overflow: hidden;

      &:active {
        background-color: #f1f1f1;
      }

      &+.group-item {
        border-top: 1rpx solid #f8f8f8;
      }

      .icon {
        width: 120rpx;
        height: 120rpx;
        padding: 20rpx;
        display: flex;
        background-color: #f1f1f1;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        border: 1rpx solid #f1f1f1;
      }

      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 20rpx;

        .top {
          display: flex;
          justify-content: space-between;
          padding: 10rpx 0;

          .name {
            font-weight: bold;
            font-size: 32rpx;
            letter-spacing: 2px;
          }

          .time {
            font-size: 24rpx;
            color: #999;
          }
        }

        .bottom {
          display: flex;

          .message {
            color: #999;
            flex: 1;
          }

          .unread {
            width: 50rpx;

            .text {
              display: inline-block;
              width: 50rpx;
              height: 50rpx;
              border-radius: 50%;
              background-color: #dd525d;
              line-height: 50rpx;
              text-align: center;
              color: #fff;
              font-size: 20rpx;
            }
          }
        }
      }
    }

    &.grid {
      flex-direction: row;
      padding: 0 30rpx;

      .group-item {
        width: 33%;
        padding: 20rpx 10rpx;
        flex-direction: column;
        align-items: center;

        // border: 1rpx dashed #f1f1f1;
        &+.group-item {
          border-top: none;
        }

        .icon {
          border-radius: 10rpx;
          position: relative;

          .button {
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }

        .top {
          .name {
            font-weight: bold;
            font-size: 28rpx;
            letter-spacing: 0;
          }
        }
      }
    }
  }
</style>
